<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>猫途鹰旅游 - 管理员端</title>
    <style lang="css">
        /* 管理员登录页背景图片 */
        .login-container {
            height: 100% !important;
            width: 100% !important;
            overflow: hidden;
            position: relative;
            box-shadow: 0 2px 21px 1px rgba(56, 127, 247, 0.2);
            background-image: url("${pageContext.request.contextPath}/images/main-image.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 登录面板样式 */
        .login-container-body {
            width: 700px;
            height: 480px;
            background-color: #eeeeee;
            opacity: 0.9;
            border-radius: 16px !important;
            box-shadow: 0 2px 21px 1px rgba(56, 127, 247, 0.2);
        }

        /* 登录面板样式 */
        .login-container-body .panel-title {
            margin-top: 20px;
        }

        .login-container-body .panel-form {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .panel-form .form-group.row {
            border-radius: .25rem;
            border: 1px solid #ccc;
        }

        .panel-form .form-group.row.justify-content-center {
            border: none;
        }

        #login-btn {
            width: 260px;
            background-color: #1fc8db;
            background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
        }
    </style>
</head>
<body>
<jsp:include page="css.jsp"/>
<div class="login-container">
    <div class="login-container-body card text-center">
        <h2 class="card-title panel-title">猫途鹰旅游</h2>
        <h6 class="card-subtitle mb-2 text-muted">要么旅行，要么读书，身体和灵魂必须有一个在路上。——《罗马假日》</h6>
        <div class="card-body panel-form">
            <form action="login.admin" method="post">
                <div class="form-group row">
                    <label for="input-username" class="col-sm-4 col-form-label">账号</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control-plaintext" id="input-username" name="username" placeholder="请输入账号" required>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="input-secret-key" class="col-sm-4 col-form-label">密钥</label>
                    <div class="col-sm-8">
                        <input type="password" class="form-control-plaintext" id="input-secret-key" name="secretKey" placeholder="密钥" required>
                    </div>
                </div>
                <div class="form-group row justify-content-center">
                    <button id="login-btn" type="submit" class="btn">进入</button>
                </div>
                <div class="form-group row justify-content-center">
                    <button type="button" class="btn btn-link" data-toggle="modal" data-target="#register-model">
                        成为管理员
                    </button>
                </div>
            </form>
        </div>
        <jsp:include page="footer.jsp"/>
    </div>
</div>

<div class="modal fade" id="register-model" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static"
     data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">注册</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="register-form" action="register.admin" method="post">
                    <div class="form-group row login-container-field">
                        <label for="register-username" class="col-sm-2 col-form-label">账号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control-plaintext" id="register-username" name="username" placeholder="请输入账号" required>
                        </div>
                    </div>
                    <div class="form-group row login-container-field">
                        <label for="register-secret-key" class="col-sm-2 col-form-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control-plaintext" id="register-secret-key" name="secretKey" placeholder="请输入密码" required>
                        </div>
                    </div>
                    <div class="form-group row login-container-field">
                        <label for="register-name" class="col-sm-2 col-form-label">名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control-plaintext" id="register-name" name="name" placeholder="请输入名称" required>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">取消</button>
                <button type="button" id="register-btn" class="btn btn-primary">好了</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#register-btn").click(function (event) {
            let username = $("#register-username").val();
            let secretKey = $("#register-secret-key").val();
            let name = $("#register-name").val();
            if (!username || !secretKey || !name) {
                alert("请完善信息！");
                return;
            }
            $("#register-form").submit();
        });

        // 注册模态框隐藏的时候重置注册表单
        $('#register-model').on('hidden.bs.modal', function (event) {
            document.getElementById("register-form").reset();
        });

        // 注册模态框隐藏的时候重置注册表单
        $('#register-model').on('show.bs.modal', function (event) {
            document.getElementById("register-form").reset();
        });
    });
</script>
</body>
</html>
